<template>
	<view class="sign-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="考勤地点"></uni-navbar></view>
		<view v-if="mapCtx">
			<map style="width: 100%; height: 100vh" ref="mapA" id="mapA" :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" :circles="circles" :key="key"></map>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			mapCtx: '',
			key: 0,
			scale: 16,
			latitude: 39.909,
			longitude: 116.39742,
			marker: [
				{
					id: 0,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '/static/img/mapiconend.png',
					rotate: 0,
					width: 24,
					height: 24
				}
			],
			circles: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					color: '#4791ff',
					radius: 200,
					strokeWidth: 2,
					fillColor: '#388bff24'
				}
			]
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();
	},
	onShow() {
		this.getLocation();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;

				this.mapCtx = uni.createMapContext('mapA');
			} else {
				this.$logout();
			}
		},
		getLocation() {
			try {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.marker[0].longitude = res.longitude; // 经度
						this.marker[0].latitude = res.latitude; // 纬度

						let options = {
							padding: [50, 50],
							points: [
								{
									latitude: this.latitude,
									longitude: this.longitude
								},
								{
									latitude: res.latitude,
									longitude: res.longitude
								}
							]
						};
						this.key++;
						// if (this.mapCtx) this.mapCtx.includePoints(options);
					}
				});
			} catch (e) {
				this.$msg('请检查位置信息');
			}
		},
		loadData() {
			this.$request('/oaAttnd/options/query', {
				clientCode: this.clientCode
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				let options = res.data.options;
				if (options.lngLat) {
					let lng = parseFloat(options.lngLat.split(',')[0]); // 经度
					let lat = parseFloat(options.lngLat.split(',')[1]);

					let data = this.$bd09_to_gcj02(lng, lat);

					this.longitude = data.lng;
					this.latitude = data.lat;
					this.circles[0].longitude = data.lng; // 经度
					this.circles[0].latitude = data.lat;
					this.circles[0].radius = options.effectiveRange;

					this.getLocation();
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	background: #fff;
}
</style>
